import { Link } from "react-router-dom";
import "./SearchPanel.css";

function HistoriesItem({ desc }) {
  return (
    <Link to={`/search/${desc}`} className="history-item" >
      <div className="history-text">
        {desc}
      </div>
    </Link>
  )
}

function SuggestItem({ videoCard, searchField = "" }) {
  if (videoCard == "") {
    return;
  }
  const breakPoint = searchField == "" ? -1 : videoCard[1].title.indexOf(searchField);
  return (
    <div className="suggest-item">
      <Link to={`/video/${videoCard[0]}`} >
        {videoCard[1].title.substring(0, breakPoint)}
        <em className="suggest-high-light">{searchField}</em>
        {videoCard[1].title.substring(breakPoint + searchField.length)}
      </Link>
    </div>
  );
}

function SearchPanel({ isVisible, searchList = [], searchField = "", maxResult = 15, setSearchField }) {

  const searchHistory = [
    "明日方舟",
    "原神",
    "Apex"
  ]

  return (
    <div className="search-pannel-wrapper">
      <div className="search-panel" tabIndex="2" style={{ display: `${isVisible ? "" : "none"}` }}>
        <div className="history">
          <div className="header" style={{ display: `${searchList.length == 0 ? "flex" : "none"}` }}>
            <div className="title">搜索历史</div>
            <div className="clear">清空</div>
          </div>
          <div className="histories-wrap" style={{ display: `${searchList.length == 0 ? "" : "none"}` }}>
            <div className="histories">
              {searchHistory.map((value, index) => {
                return <HistoriesItem desc={value} key={index} />
              })}
            </div>
          </div>
        </div>
        <div className="suggestions">
          {Object.entries(searchList).map(([key, value], index) => {
            if (index > maxResult) {
              return;
            }
            return (
              <SuggestItem videoCard={value} key={index} searchField={searchField} />
            )
          })}
        </div>
      </div>
    </div>
  );
}

export default SearchPanel;